<template>
	<view class="home-sidebar-tail">
		<view class="home-sidebar-actions">
			<view class="home-sidebar-action" v-if="!showSideBarButton">
				<button class="button-icon-button clickable" @click="clickSidebarPopup(2)">
					<view class="button-icon-button-icon">
						<uni-icons type="closeempty"></uni-icons>
					</view>
				</button>
			</view>
			<view class="home-sidebar-action">
				<button class="button-icon-button button-shadow clickable">
					<view class="button-icon-button-icon">
						<uni-icons custom-prefix="iconfont" type="icon-shezhi"></uni-icons>
					</view>
				</button>
			</view>
			<view class="home-sidebar-action">
				<button class="button-icon-button button-shadow clickable" @click="toQQGroup">
					<view class="button-icon-button-icon">
						<uni-icons type="qq"></uni-icons>
					</view>
				</button>
			</view>
		</view>
		<view>
			<button class="button-icon-button clickable" @click="addTopic">
				<view class="button-icon-button-icon">
					<uni-icons custom-prefix="iconfont" type="icon-new"></uni-icons>
				</view>
				<view class="button-icon-button-text">{{ defaultTopic }}</view>
			</button>
		</view>
	</view>
</template>

<script>
export default {
	emits: ["clickSidebarPopup", "addTopic"],
	props: {
		showSideBarButton: {
			type: Boolean,
			default: () => {
				return true;
			}
		},
	},
	data() {
		return {
			defaultTopic: uni.$u.chat.defaultTopic,
		};
	},
	created() {
	},
	methods: {
		clickSidebarPopup(type) {
			this.$emit("clickSidebarPopup", type);
		},
		addTopic() {
			this.$emit("addTopic");
		},
		toQQGroup: function () {
			const url = "https://qm.qq.com/cgi-bin/qm/qr?k=bVIPNXaOaYJEoZA1PcFjb5lP6XYX5IED&jump_from" +
					"=webapi&authKey=uTlIvwgpceTLOgznrfzwBuXZfoiN62y5oKDUd/NlHNMGaafP0XqveX7zLF2xZFza";
			const newWindow = window.open(url, "_blank");
			// 检查是否成功打开新标签页
			if (newWindow) {
				// 如果成功打开，则将新标签页的 opener 置为 null，防止恶意脚本窃取当前页面的信息
				newWindow.opener = null;
			} else {
				// 如果被浏览器阻止打开新标签页，则直接在当前标签页中打开链接
				window.location.href = url;
			}
		},
	}
}
</script>

<style lang="scss">

@import "../css/chat.scss";

.home-sidebar-tail {
	display: flex;
	justify-content: space-between;
	padding-top: 20px;
}

.home-sidebar-actions {
	display: inline-flex;
}

.home-sidebar-action:not(:last-child) {
	margin-right: 15px;
}

.button-shadow {
	box-shadow: $card-shadow;
}

</style>